<template>
	<view>
		<view style="background-color: #ffffff;">
			<u-swiper :list="slide" interval="3000" duration="500" border-radius="0" height="400" img-mode="scaleToFill" @click="onClickSlide">
			</u-swiper>
		</view>
		<!--
		<view style="position: fixed; top:0; width: 100%; padding: 12px;">
			<u-search placeholder="请输入搜索关键字" v-model="keyword" :show-action="false" bg-color="#ffffff"
				@custom="onSearch" @search="onSearch"></u-search>
		</view>
		-->
		<view style="padding: 24rpx;">
			<view
				style="display: flex; align-items: center; background-color: #ffffff; border-radius: 24rpx; padding: 8rpx 26rpx;">
				<view style="color: #3be0b5; font-size: 32rpx;">
					最新公告
				</view>
				<view style="flex: 1;">
					<u-notice-bar mode="vertical" :list="notice_text" color="#131313" bg-color="#ffffff"
						@click="onNoticeClick"></u-notice-bar>
				</view>
			</view>
		</view>
		<view style="padding:0 24rpx;">
			<view style="background-color: #ffffff; border-radius: 24rpx; padding: 36rpx 24rpx;">
				<u-grid :col="4" :border="false" @click="onClickNav">
					<u-grid-item v-for="(item,index) in nav" :key="item.id" :index="index"
						:custom-style="{padding: '3px 0px'}">
						<view class="grid-image">
							<u-image width="60rpx" height="60rpx" :src="item.image"></u-image>
						</view>
						<view class="grid-text">{{item.title}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view style="padding:24rpx;">
			<u-swiper :list="ad" border-radius="80" height="160" @click="onClickSwiperAd"></u-swiper>
		</view>
		<view style="padding: 0 24rpx;">
			<view style="display: flex; align-items: center;">
				<view style="padding: 10rpx 10rpx 0 0;">
					<u-image src="/static/index2/hot.png" width="30" mode="widthFix"></u-image>
				</view>
				<view style="font-size: 38rpx; font-weight: 600;">乡村热度榜</view>
			</view>
			<view
				style="display: flex; justify-content:space-between; background-color: #ffffff;border-radius: 24rpx; padding: 36rpx; margin-top: 20rpx;"
				v-if="hotvillage">
				<view style="width: 31%;" v-for="(item,index) in hotvillage" :key="index" @click="$tourl($unishow+'index/village?vid='+item.id)">
					<view>
						<u-image :src="'/static/index2/no'+item.top+'.png'" mode="widthFix" width="100"></u-image>
					</view>
					<view>{{item.v_name}}</view>
					<view style="margin-top: 20rpx;">
						<u-image :src="item.cover_image" width="100%" height="200" border-radius="24">
						</u-image>
					</view>
				</view>
				
			</view>
		</view>
		<view
			style="background-color: #fcfdfc; min-height: 600rpx; border-top-left-radius:48rpx; border-top-right-radius:48rpx; margin-top: 24rpx; padding: 24rpx;">
			<view>
				<u-tabs :list="villagelist" :is-scroll="false" :current="villagecurrent" bg-color="#fcfdfc"
					font-size="32" active-color="#3be0b5" :height="100" :bar-width="100" @change="villagechange">
				</u-tabs>
			</view>
			<view v-show="villagecurrent == 0" style="margin-top: 20rpx;">
				<view v-for="(item, index) in village_list" :key="item.id"
					style="display: flex; align-items: center; padding:24rpx; border-radius: 12rpx; background-color: #FFFFFF; margin-bottom: 28rpx; box-shadow: #EEEEEE 0px 0px 5px;"
					@click="onClickHotVillage(item.id)">
					<view>
						<u-image width="180rpx" height="180rpx" border-radius="12" :src="item.cover_image"></u-image>
					</view>
					<view style=" padding-left: 24rpx; flex:1;">
						<view style="line-height: 36rpx; font-size: 28rpx;">
							<text style="padding: 0 24rpx;">{{item.v_name}}</text> <u-icon name="eye" size="28"></u-icon>{{item.view}}
						</view>
						<view style=" display: flex; padding-top: 12rpx;">
							<view style="width:33.33%;">
								<view style="font-size: 24rpx; color: #6d796d; height: 44rpx;text-align: center;">村民数</view>
								<view style="font-size: 24rpx;  height: 40rpx;text-align: center; color:#3be0b5;">{{item.user_number}}
								</view>
							</view>
							<view style="width:33.33%;">
								<view style="font-size: 24rpx; color: #6d796d; height: 44rpx;text-align: center;">党员数</view>
								<view style="font-size: 24rpx;  height: 40rpx;text-align: center;color:#3be0b5;">{{item.user_party}}
								</view>
							</view>
							<view style="width:33.33%;">
								<view style="font-size: 24rpx; color: #6d796d; height: 44rpx; text-align: center;">管理员</view>
								<view style="font-size: 24rpx;  height: 40rpx; text-align: center;color:#3be0b5;">{{item.admin}}</view>
							</view>
						</view>
					</view>

				</view>
				<u-loadmore :status="status" :load-text="loadText" :margin-top="20" />
			</view>
			<view v-show="villagecurrent == 1" style="margin-top: 20rpx;">
				<view style="padding:24rpx; border-radius: 12rpx; background-color: #FFFFFF;" v-if="tj">
					<view style="display: flex; justify-content: space-between;">
						<view
							style="width: 24%; height: 140rpx; padding: 12rpx; background-color: #C0C0C0; background: url(static/index2/tongji1.png) no-repeat; background-size:100% 100%;">
							<view style="line-height: 50rpx;font-size: 22rpx; color: #FFFFFF;">乡村数</view>
							<view style="color: #FFFFFF;"><text style="font-size: 42rpx;">{{tj.village}}</text><text
									style="font-size: 22rpx;">个</text></view>
						</view>
						<view
							style="width: 24%; height: 140rpx; padding: 12rpx; background-color: #C0C0C0; background: url(static/index2/tongji2.png) no-repeat; background-size:100% 100%;">
							<view style="line-height: 50rpx;font-size: 22rpx; color: #FFFFFF;">访客数</view>
							<view style="color: #FFFFFF;"><text style="font-size: 42rpx;">{{tj.guest}}</text><text
									style="font-size: 22rpx;">个</text></view>
						</view>
						<view
							style="width: 24%; height: 140rpx; padding: 12rpx; background-color: #C0C0C0; background: url(static/index2/tongji3.png) no-repeat; background-size:100% 100%;">
							<view style="line-height: 50rpx;font-size: 22rpx; color: #FFFFFF;">认证村民</view>
							<view style="color: #FFFFFF;"><text style="font-size: 42rpx;">{{tj.rzcm}}</text><text
									style="font-size: 22rpx;">个</text></view>
						</view>
						<view
							style="width: 24%; height: 140rpx; padding: 12rpx; background-color: #C0C0C0; background: url(static/index2/tongji4.png) no-repeat; background-size:100% 100%;">
							<view style="line-height: 50rpx; font-size: 22rpx; color: #FFFFFF;">商城交易额</view>
							<view style="color: #FFFFFF;"><text style="font-size: 42rpx;">{{tj.mall}}</text><text
									style="font-size: 22rpx;">个</text></view>
						</view>
					</view>
					<view style="font-size: 30rpx; margin-top: 30rpx; font-weight: 600;">
						数据统计分析
					</view>
					<view style="display: flex; justify-content: space-between; padding: 24rpx;">
						<view style="width: 31%;">
							<view><text
									style="color: #ff5065; font-size: 48rpx; font-weight: 900; vertical-align: -6rpx;">•</text><text
									style="padding: 0 12rpx;">个人</text><text>{{tj.total_score}}</text></view>
							<view><text
									style="color: #0caefd; font-size: 48rpx; font-weight: 900; vertical-align: -6rpx;">•</text><text
									style="padding: 0 12rpx;">家庭</text><text>0</text></view>
							<view>
								<u-circle-progress active-color="#ff5065" inactive-color="#0caefd" :border-width="20"
									:percent="100">
									<view class="u-progress-content">
										<text class='u-progress-info'>积分</text>
									</view>
								</u-circle-progress>
							</view>
						</view>
						<view style="width: 31%;">
							<view><text
									style="color: #ff5065; font-size: 48rpx; font-weight: 900; vertical-align: -6rpx;">•</text><text
									style="padding: 0 12rpx;">发布</text><text>{{tj.post}}</text></view>
							<view><text
									style="color: #0caefd; font-size: 48rpx; font-weight: 900; vertical-align: -6rpx;">•</text><text
									style="padding: 0 12rpx;">回复</text><text>{{tj.reply}}</text></view>
							<view>
								<u-circle-progress active-color="#ff5065" inactive-color="#0caefd" :border-width="20"
									:percent="tj.post_percent">
									<view class="u-progress-content">
										<text class='u-progress-info'>帖子</text>
									</view>
								</u-circle-progress>
							</view>
						</view>
						<view style="width: 31%;">
							<view><text
									style="color: #ff5065; font-size: 48rpx; font-weight: 900; vertical-align: -6rpx;">•</text><text
									style="padding: 0 12rpx;">种植</text><text>{{tj.plant}}</text></view>
							<view><text
									style="color: #0caefd; font-size: 48rpx; font-weight: 900; vertical-align: -6rpx;">•</text><text
									style="padding: 0 12rpx;">养殖</text><text>{{tj.breed}}</text></view>
							<view>
								<u-circle-progress active-color="#ff5065" inactive-color="#0caefd" :border-width="20"
									:percent="tj.plant_percent">
									<view class="u-progress-content">
										<text class='u-progress-info'>种养</text>
									</view>
								</u-circle-progress>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view style="padding: 24rpx; border-radius: 12rpx; background-color: #ffffff;" v-show="villagecurrent == 1">
				<view style="width: 100%; height:500rpx ">
					<l-echart ref="chart"></l-echart>
				</view>
			</view>




			<view style="height: 100rpx;"></view>
		</view>


		<u-tabbar v-model="tabbar_current" :list="tabbar" :before-switch="beforeSwitch" active-color="#2ac97c"
			inactive-color="">
		</u-tabbar>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/components/lime-echart/echarts';
	import lEchart from '@/uni_modules/lime-echart/components/lime-echart/'
	export default {
		components: {
			lEchart
		},
		data() {
			return {
				tabbar: [],
				tabbar_current: 0,
				village_list: [],
				slide: [],
				keyword: '',
				notice: [],
				notice_text: [],
				hotvillage: null,
				villagelist: [{
					name: '乡村统计'
				}, {
					name: '数据统计'
				}],
				villagecurrent: 1,
				status: 'loadmore',
				village_list: [],
				page: 1,
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '已全部加载'
				},
				tj: null,
				ad: [],
				nav: [],
				option: {
					title: {
						text: '党员统计'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['入驻党员']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						name: '入驻党员',
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'line',
						color: '#2be4b4',
						areaStyle: {
							opacity: 0.5,
							color: '#2be4b4'
						}
					}]
				},
			}
		},
		onLoad() {
			var that = this;
			uni.request({
				url: this.$unishow + 'api/index/index',
				header: {
					token: this.token
				},
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					that.slide = res.data.slide;
					that.notice = res.data.notice;
					for (let i in that.notice) {
						that.notice_text.push(that.notice[i].title);
					}
					that.nav = res.data.nav;
					that.tabbar = res.data.bottomnav;
					that.tabbar[0].iconPath = 'home';
					that.tabbar[0].selectedIconPath = "home-fill";
					that.tabbar[4].iconPath = 'account';
					that.tabbar[4].selectedIconPath = "account-fill";
					that.ad = res.data.ad;
					that.hotvillage = res.data.hotvillage2;
					that.tj = res.data.tj;
					that.tj.post_percent = that.tj.post / (that.tj.post + that.tj.reply) * 100;
					that.tj.plant_percent = that.tj.plant / (that.tj.plant + that.tj.breed) * 100;
					that.option.xAxis.data = res.data.tj.party.month;
					that.option.series[0].data = res.data.tj.party.value;
					uni.setNavigationBarTitle({
						title: res.data.siteName
					});
					that.loaddata();
				},
				fail: () => {},
				complete: () => {}
			});


			//微信jssdk
			if (this.$wechat && this.$wechat.isWechat()) {
				this.$wechat.share({
					title: "网兆丰欢迎您",
					desc: "",
					img: this.$unishow + "images/index_banner.jpg"
				}, '', {
					location: {
						type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
						success: function(res) {
							console.log('微信中获取位置');
							console.log(res);
							that.lng = res.longitude;
							that.lat = res.latitude;
							uni.request({
								url: that.$unishow + 'api/index/weather',
								method: 'GET',
								data: {
									lng: that.lng,
									lat: that.lat
								},
								success: res => {
									that.weather = '今日天气：' + res.data.msg;
								},
								fail: () => {},
								complete: () => {}
							});
						}
					}
				});
			} else {
				//获取位置
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.lng = res.longitude;
						that.lat = res.latitude;
						uni.request({
							url: this.$unishow + 'api/index/weather',
							method: 'GET',
							data: {
								lng: that.lng,
								lat: that.lat
							},
							success: res => {
								that.weather = '今日天气：' + res.data.msg;
							},
							fail: () => {},
							complete: () => {}
						});
					}
				});
			}
		},
		methods: {
			loaddata() {
				var that = this;
				this.status = 'loading';
				uni.request({
					url: this.$unishow + 'api/index/village_list',
					method: 'GET',
					data: {
						page: this.page
					},
					success: res => {
						this.page = ++this.page;
						if (res.data.list.length < 10) {
							that.status = "nomore"
						} else {
							that.status = "loadmore"
						}
						that.village_list = that.village_list.concat(res.data.list)
					},
					fail: () => {},
					complete: () => {}
				});
			},
			onClickHotVillage(id) { //热度村点击
				console.log(id);
				window.location.href = this.$unishow + 'index/village?vid=' + id;
			},
			villagechange(index) { //村列表和村统计选择
				this.villagecurrent = index;
			},
			onClickSwiperAd(index) {
				window.location.href = this.ad[index].url;
			},
			onClickNav(index) { //导航点击
				this.$tourl(this.nav[index].url);
			},
			onNoticeClick(index) { //公告点击
				uni.navigateTo({
					url: '/pages/notice/view?id=' + this.notice[index].id
				});
			},
			onSearch(keyword) { //搜索
				console.log(keyword);
				uni.navigateTo({
					url: '/pages/marticle/search?keyword=' + keyword
				})
			},
			onClickSlide(index) { //幻灯点击
				console.log(index);
				window.location.href = this.slide[index].url;
			},
			beforeSwitch(index) { //底部导航选择
				this.$tourl(this.tabbar[index].pagePath)
			}
		},
		async mounted() {
			var that = this;
			uni.request({
				url: this.$unishow + 'api/index/index',
				header: {
					token: this.token
				},
				method: 'GET',
				data: {},
				success: res => {
					that.option.xAxis.data = res.data.tj.party.month;
					that.option.series[0].data = res.data.tj.party.value;
					that.$refs.chart.init(config => {
						const {
							canvas
						} = config;
						const chart = echarts.init(canvas, null, config);
						canvas.setChart(chart);
						chart.setOption(that.option);
						that.villagecurrent = 0;
						// 需要把 chart 返回
						return chart;
					});
				},
				fail: () => {},
				complete: () => {}
			});
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f1f5f2;
	}

	.u-progress-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-progress-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #fb9126;
	}

	.u-progress-info {
		font-size: 28rpx;
		letter-spacing: 2rpx
	}
</style>
